<template>
  <a-modal class="common-modal add-prod-modal" :title="title" :footer="null" :width="760" :visible="visible" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="confirmLoading">
      <div class="common-modal-content">
        <a-row class="pr-20">
          <a-col :span="12" class="p-12 border-right-base pt-0">
            <a-input v-model:value="searchValue" class="mb-12" @keyup="onSearch"  :placeholder="$t('common.pleaseInputSelectContents')">
              <template #prefix>
                <SearchOutlined />
              </template>
            </a-input>
            <a-tree v-model:checkedKeys="checkedKeys" default-expand-all checkable @check="checkTree" :height="500" :tree-data="treeData" :selectable="false"></a-tree>
          </a-col>
          <a-col :span="12" class="p-12  pt-0">
            {{$t('common.selected')}} {{selectNodeList.length}} {{$t('common.item')}}
            <article>
              <a-tag closable v-for="(item ) in selectNodeList" :key="item.key" @close="closeTag(item)" class="ft-size14">{{item.title}}</a-tag>
            </article>
          </a-col>
        </a-row>

      </div>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{$t('common.cancel')}}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{$t('common.ok')}}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup>
import { nextTick, ref } from 'vue'
import { SearchOutlined } from '@ant-design/icons-vue'
import i18n from '@/locales/index' 
const { t } = i18n.global

const emits = defineEmits(['ok'])
let visible = ref(false)
let confirmLoading = ref(false)
let title = ref('')
// let recordIds = ref([])
let selectNodeList = ref([])
let searchValue = ref()
let checkedKeys = ref([])
let treeData = ref([])
const initModalData = () => {
  searchValue.value = ''
}
const onSearch = () => {
  treeData.value.forEach(item=>{
    item.style = { display: searchValue.value ?'none':'flex' }
    item.children.forEach(el=>{
      el.style = {
        display: el.title.indexOf(searchValue.value) > -1 ?'flex':'none'
      }
    })
  })
}

const open = async (list,checkList) => {
  title.value = t('other.addProductionStation')
  // console.log(list)
  let newList = []
  if(list){
    list.forEach(
        item=>{
          if (item.role == 4 || item.role == 6){
            newList.push({title:item.lineNo+'-'+item.stationNo,key:item.stationNo,disableCheckbox:true})
          }else{
            newList.push({title:item.lineNo+'-'+item.stationNo,key:item.stationNo})
          }
        }
    )
  }
  // disableCheckbox:true 角色 1桥接站 2挂片站 3车缝站 4存储站 5质检站 6空衣架回收站
  treeData.value = [
    {
      title:list[0].lineNo??'',
      key:111111,
      children:newList
    }
  ]
  // recordIds.value = []
  selectNodeList.value = checkList

  checkedKeys.value = checkList.map(i => i.key)
  // console.log(selectNodeList.value)
  initModalData()
  visible.value = true
  await nextTick()
}
const checkTree = (checkedKeys, { checkedNodes }) => {
  selectNodeList.value = checkedNodes.filter(i => !i.children)
}
const closeTag = (tag) => {
  let selectTags = selectNodeList.value.filter(i => i.key != tag.key)
  selectNodeList.value = selectTags
  checkedKeys.value = selectTags.map(i => i.key)
}
const handleOk = async () => {
  try {
    confirmLoading.value = true
    let params = selectNodeList.value
    // console.log(params)
    handleCancel()
    emits('ok', params)
  } catch (err) {
    confirmLoading.value = false
  }
}
const handleCancel = () => {
  visible.value = false
  confirmLoading.value = false
}

defineExpose({
  open
})
</script>
